{include file="common/header-top" /}

<style>
    .van-grid-item__text{
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .job-item{
        display: block;
        margin-top: 5px;
    }

    .job-item-a{
        color: #2f2d33;
    }

    .job-item .job-item-img-icon {
        margin-top: 28px;
        padding-left: 10px;
    }

    .job-item .job-item-title{
        margin: 8px 0px 5px 2px;
        color: #3c3c3c;
        text-overflow: ellipsis;
        font-size: 15px;
        font-weight: 600;
        -webkit-line-clamp: 2;
    }
    .job-item .job-item-icon{
        font-size: small;
    }
    .job-item .job-item-span{
        color: #949595;
        font-weight: 500;
        font-size: 12px;
        padding-left: 5px;
    }
    .job-item .job-item-span-unit{
        font-size: 14px;
        color: #fcc48d;
    }

    .job-item .job-item-money-div{
        margin-top: 45px;
        float: right;
        margin-right: 5px;
    }


    .job-item .van-cell{
        padding: 0;
    }

    .job-item .van-cell:not(:last-child)::after{
        border-bottom: 0;
    }



    .article {
        padding-left: 10px;
        padding-right: 10px;
        overflow: auto;
    }
    .article img {
        max-width: 100% !important;
    }



</style>


<div id='app' v-cloak>

    <van-nav-bar title="我的信用分" left-arrow @click-left="goBack" left-text="返回">
    </van-nav-bar>

    <van-row>
        <van-col span="24">
            <van-button type="primary" size="large">我的信用分: {{userExtend.credit_score}} 分</van-button>
        </van-col>
    </van-row>

    <van-tabs v-model="currentTab" swipeable @click="changeTab">

        <van-tab title="信用分规则" name="1">

            <!--信用分规则-->
            <van-row>
                <van-col span="24">
                    <section v-html="pageInfo.content" class="article">
                    </section>
                </van-col>
            </van-row>
            <!--信用分规则-->

        </van-tab>

        <van-tab title="信用分记录" name="2">
            <!--信用分记录-->

            <van-row>
                <van-list
                        v-model="scoreLoading"
                        :finished="scoreFinished"
                        finished-text="没有更多了"
                        @load="getScoreList"
                >
                    <van-row v-for="item in scoreList" class="job-item">


                            <a href="#" class="job-item-a">
                                <van-col span="5">
                                    <van-icon
                                            :name="getIcon(item)"
                                            class="job-item-img-icon" size="45px"
                                    ></van-icon>
                                </van-col>

                                <van-col span="19">
                                    <van-col span="24">
                                        <h4 class="job-item-title" style="display: inline-block">
                                            <div class="van-ellipsis">{{item.kindCh}}</div>
                                        </h4>
                                    </van-col>
                                    <van-row>
                                        <van-col span="24">
                                            <van-cell
                                                    icon="/__FRONT__/images/icon/wallet-jifen.png"
                                                    :title="getCreditsTitle(item)"
                                                    :value="item.credit_score + '分'"
                                            >
                                            </van-cell>
                                            <van-cell
                                                    icon="/__FRONT__/images/icon/publish-job-time.png"
                                                    title="时间"
                                                    :value="item.timeCh"
                                            ></van-cell>
                                        </van-col>
                                    </van-row>
                                </van-col>

                                <van-col span="24">
                                    <van-divider style="margin: 3px 0;"></van-divider>
                                </van-col>
                            </a>



                    </van-row>
                </van-list>
            </van-row>

            <!--信用分记录-->
        </van-tab>
    </van-tabs>






    {include file="common/foot-bar" /}

</div>


<script>

    Vue.use(vant.Lazyload);


    var vm = new Vue({
        el: '#app',
        data() {
            return {
                active:3,
                userCenterIcon: {
                    normal: '/__FRONT__/images/icon/usercenter-n.png',
                    active: '/__FRONT__/images/icon/usercenter-a.png'
                },
                erShouIcon: {
                    normal: '/__FRONT__/images/icon/ershou-n.png',
                    active: '/__FRONT__/images/icon/ershou-a.png'
                },

                currentTab: '{$type}',

                userInfo:{},
                userExtend:{
                    credit_score: '--'
                },


                //信用分规则
                pageInfo: {},

                //信用分记录
                scoreList: [],
                scorePage: 1,
                scorePageSize: 10,
                scoreLoading: false,
                scoreFinished: false,
            };
        },

        created(){

            axiosRequest.get('/api/user/userInfo', {params:{userExtend:1}} ).then(function (response) {
                if (response.code == 200) {
                    vm.$data.userInfo = response.data.userInfo;
                    vm.$data.userExtend = response.data.userInfo.extend;
                } else {
                    vant.Toast(response.msg);
                }
            });


            this.getRules();
        },

        computed:{
        },

        methods:{
            //返回上一页
            goBack(){
                history.back();
            },

            //获取展示图标
            getIcon(item){
                if (item.type == 1) {
                    return '/__FRONT__/images/icon/add.png';
                }
                if (item.type == 2) {
                    return '/__FRONT__/images/icon/jian.png';
                }

            },
            getCreditsTitle(item){
                if (item.type == 1) {
                    return '增加信用分';
                }
                if (item.type == 2) {
                    return '减少信用分';
                }
            },


            //获取信用分规则
            getRules(){
                var params = {
                    pageFlag: 'credit_score_rules'
                };
                axiosRequest.get('/api/news/singlePage',{params:params}).then(function (response) {
                    if (response.code == 200) {
                        vm.$data.pageInfo = response.data;
                    } else {
                        vant.Toast('系统开小差啦！');
                    }
                });
            },

            //切换tab
            changeTab(name, title){
                this.scoreList = [];
                this.scorePage = 1;
                this.scorePageSize = 10;
                this.scoreLoading = true;
                this.scoreFinished = false;
                this.getScoreList();
            },


            //获取我的信用分记录
            getScoreList(){
                var params = {
                    page: this.scorePage,
                    pageSize: this.scorePageSize
                };
                axiosRequest.get('/api/user/scoreList', {params:params}).then(function (response) {
                    if (response.code == 200) {
                        if (response.data) {
                            response.data.forEach(function (item) {
                                vm.$data.scoreList.push(item);
                            });
                            vm.$data.scoreLoading = false;
                            vm.$data.scorePage += 1;

                            if (response.data.length < vm.$data.scorePageSize) {
                                vm.$data.scoreFinished = true;
                                vm.$data.scoreLoading = false;
                            }
                        } else {
                            vant.Toast('没有更多啦！');
                            vm.$data.scoreFinished = true;
                            vm.$data.scoreLoading = false;
                        }
                    } else {
                        vant.Toast('系统开小差啦！');
                    }
                });
            },




        }
    });


</script>

{include file="common/foot-bottom" /}
